doctype
html(lang='zh-CN')
	head
		meta(charset='utf-8')
		meta(name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0')
		meta(name='format-detection' content='telephone=no')
		style.
			html,
			body {
				margin: 0;
				padding: 0;
				height: 100%;
				overflow: hidden;
			}
			canvas {
				display: block;
				width: 100%;
				height: 100%;
			}
		title 星星召我去战斗
		script(src='paper-full.min.js')
		script(type='text/paperscript' canvas='canvas').
			var layer = project.activeLayer;
			var values = {
				count: 34,
				points: 32
			};
			for (var i = 0; i < values.count; i++) {
				var path = new Path({
					fillColor: i % 2 ? 'red' : 'black',
					closed: true
				});
				var offset = new Point(20 + 10 * i, 0);
				var l = offset.length;
				for (var j = 0; j < values.points * 2; j++) {
					offset.angle += 360 / values.points;
					var vector = offset.normalize(l * (j % 2 ? 0.1 : -0.1));
					path.add(offset + vector);
				}
				path.smooth({ type: 'continuous' });
				layer.insertChild(0, new Group({
					children: [path],
					applyMatrix: false
				}));
			}
			function onFrame(event) {
				for (var i = 0; i < values.count; i++) {
					var item = layer.children[i];
					var angle = (values.count - i) * Math.sin(event.count / 128) / 10;
					item.rotate(angle);
				}
			}
			// Reposition the paths whenever the window is resized:
			function onResize(event) {
				layer.position = view.center;
			}
	body
		canvas(id='canvas' resize stats hidpi='off')
